<template>
  <navBar class="cart-navbar">
    <div slot="center">购物车({{ cartLength }})</div>
  </navBar>
</template>

<script>
import navBar from "components/common/navbar/navbar";

import { mapGetters } from "vuex"; // mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
export default {
  name: "cartNavbar",
  data() {
    return {};
  },
  components: {
    navBar
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["cartLength"])
  }
};
</script>

<style lang="less" scoped>
.cart-navbar {
  background-color: var(--color-tint);
  color: #fff;
}
</style>